<!--
 * @Author: 郑文森
 * @Date: 2022-03-11 16:22:57
 * @LastEditors: 郑文森
 * @LastEditTime: 2022-04-17 23:15:17
 * @FilePath: \Talent recruitment system\frontend\src\views\home\home.vue
 * @Description: 前台首页
-->
<template>
  <div class="page">
    <MENU></MENU>
    <div class="header">
      <div class="header-left"></div>
      <div class="header-main">
        <el-carousel trigger="click" height="150px" class="carousel">
          <el-carousel-item v-for="item in images" :key="item">
            <img :src="item.url" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="header-right">
        <el-form :model="loginForm" :rules="rules" ref="loginForm" class="loginForm">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="账号登陆" name="1">
              <el-form-item prop="name">
                <el-input v-model="input" placeholder="请输入账号" clearable></el-input>
              </el-form-item>
              <el-form-item prop="name">
                <el-input v-model="input" placeholder="请输入密码" clearable show-password></el-input>
              </el-form-item>
              <el-button type="primary" class="btn-login">立即登录</el-button>
            </el-tab-pane>
            <el-tab-pane label="手机登录" name="2">
              <el-form-item prop="name">
                <el-input v-model="input" placeholder="请输入手机号" clearable></el-input>
              </el-form-item>
              <el-form-item prop="name">
                <el-input v-model="input" placeholder="请输入动态验证码" clearable show-password></el-input>
              </el-form-item>
              <el-button type="primary" class="btn-login">立即登录</el-button>
            </el-tab-pane>
          </el-tabs>
        </el-form>
        <div class="tip">
          <el-link type="info">忘记密码</el-link>
          <el-link type="primary" class="reg">注册账号</el-link>
        </div>
      </div>
    </div>
    <div class="box-1">
      <div class="title"><span>名企招聘</span></div>
      <div class="box-body">
        <el-card shadow="hover" class="card" v-for="item in enterpriseList" :key="item">
          <el-image :src="item.avatar_url" @click="checkEnterprise">
            <div slot="error" class="image-slot" @click="checkEnterprise">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
          <p style="font-size:20px" @click="checkEnterprise">{{ item.name }}</p>
          <span style="margin-right:14px">{{ item.scale }}</span>
          <span>{{ item.industry }}</span>
          <div style="margin-top:20px">2个热招岗位</div>
        </el-card>
      </div>
      <div>
        <el-button size="large" @click="toEnterprise" class="btn-showMore">查看更多</el-button>
      </div>
    </div>

    <div class="box-1">
      <div class="title"><span>最新职位</span></div>
      <div class="box-body">
        <el-card shadow="hover" class="card" v-for="item in 10" :key="item">
          <div class="pic"></div>
          <p>北京互联互通</p>
          <span>200/500人</span>
          <span>{化工/能源}</span>
          <div class="num">2个热招岗位</div>
        </el-card>
      </div>
      <div>
        <el-button size="large" @click="toJob" class="btn-showMore">查看更多</el-button>
      </div>
    </div>

    <div class="box-1">
      <div class="title"><span>推荐人才</span></div>
      <div class="box-body">
        <el-card shadow="hover" class="card" v-for="item in 10" :key="item">
          <div class="pic"></div>
          <p>北京互联互通</p>
          <span>200/500人</span>
          <span>化工/能源</span>
          <div class="num">2个热招岗位</div>
        </el-card>
      </div>
      <div>
        <el-button size="large" @click="toPersonnel" class="btn-showMore">查看更多</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import MENU from './components/menu.vue'

export default {
  components: {
    MENU
  },

  data() {
    return {
      activeIndex: "1", // 导航栏激活id
      activeName: "1", // 标签栏激活id
      images: [
        { url: require("@/assets/images/image1.png") },
        { url: require("@/assets/images/image2.png") },
        { url: require("@/assets/images/image3.png") },
      ],
      enterpriseList: [
        {
          name: '北京互联互通',
          industry: '化工/能源',
          scale: '200/500人'
        },
        {
          name: '北京壹体体育',
          industry: '化工/能源',
          scale: '200/500人'
        },
        {
          name: '小娃科技',
          industry: '化工/能源',
          scale: '200/500人'
        },
        {
          name: '河川电子',
          industry: '化工/能源',
          scale: '200/500人'
        },
        {
          name: '万物云',
          industry: '化工/能源',
          scale: '200/500人'
        },
        {
          name: '瑞云科技有限公司',
          industry: '化工/能源',
          scale: '200/500人'
        },
        {
          name: '丽水电子厂',
          industry: '化工/能源',
          scale: '200/500人'
        },
        {
          name: '北京互联互通',
          industry: '化工/能源',
          scale: '200/500人'
        },
        {
          name: '北京互联互通',
          industry: '化工/能源',
          scale: '200/500人'
        },
        {
          name: '北京互联互通',
          industry: '化工/能源',
          scale: '200/500人'
        },
      ],
      jobList: [],
      personnel: []
    };
  },
  methods: {
    /**
     * @description: 跳转到企业列表
     * @param {*}
     * @return {*}
     */
    toEnterprise() {
      this.$router.push('/enterpriseList')
    },

    /**
     * @description: 查看企业详情
     * @param {*}
     * @return {*}
     */
    checkEnterprise() {
      this.$router.push('/enterpriseDetail')
     },


    /**
     * @description: 跳转到人才列表
     * @param {*}
     * @return {*}
     */
    toPersonnel() {
      this.$router.push('/personnelList')
    },

    /**
     * @description: 跳转到职位列表
     * @param {*}
     * @return {*}
     */
    toJob() {
      this.$router.push('/positionDetail')
    }
  },
};
</script>

<style lang="scss" scoped>
.page {
  // height: 100%;
  width: 100%;
  background: rgba(240, 240, 240, 0.541);
  text-align: center;

  .top {
    background: rgba(0, 0, 0, 0.692);
    height: 28px;
  }

  .header {
    margin: 0 auto;
    margin-top: 15px;
    border-radius: 5px;
    background: #ffff;
    height: 300px;
    width: 90%;
    padding: 15px;

    .header-left {
      display: inline-block;
      width: 25%;
    }

    .header-main {
      display: inline-block;
      vertical-align: top;
      width: 50%;
      height: 100%;
      padding: 0 18px;

      .carousel {
        height: 100%;
      }
    }

    .header-right {
      width: 25%;
      display: inline-block;

      .btn-login {
        width: 100%;
      }
    }

    .tip {
      width: 100%;
      text-align: left;
      margin-top: 8px;

      .reg {
        margin-left: 30px;
        // margin-bottom: 20px;
      }
    }
  }


  .box-1 {


    .box-body {
      width: 90%;
      padding: 15px;
      display: inline-block;

      .card {
        display: inline-block;
        width: 310px;
        height: 310px;
        background: #ffff;
        margin: 12px;
        border-radius: 8px;

        ::v-deep .el-image {
          width: 100px;
          height: 100%;
          line-height: 100px;
        }
      }
    }

    .title {
      margin-top: 30px;

      span {
        font-size: 24px;
      }
    }

    .btn-showMore {
      width: 350px;
    }
  }
}

::v-deep .el-carousel__container {
  height: 100% !important;
}
</style>

